<template>
  <el-container class="common-layout">
    <el-header class="cl-header">
      <div class="left">
        <div class="name">
          <img src="./assets/logo.png" @dblclick="handleSectorOpen" />盈光{{
            newConceptList.length > 0 ? newConceptList.length : ''
          }}
        </div>
        <el-menu
          :default-active="activeIndex"
          :router="true"
          :ellipsis="false"
          mode="horizontal"
        >
          <el-menu-item index="/topGainer">
            涨幅榜({{ topGainers.length }})
          </el-menu-item>
          <el-menu-item index="/topLoser">
            跌幅榜({{ topLosers.length }})
          </el-menu-item>
          <el-menu-item index="/recommendation">
            量化推荐({{ recommendations.length }})
          </el-menu-item>
          <el-menu-item index="/history">
            历史预测({{ historicalPredictions.length }})
          </el-menu-item>
          <el-menu-item index="/personal">持仓管理</el-menu-item>
        </el-menu>
      </div>
      <div class="right">
        <div class="share" v-if="isFilter">
          份额: {{ formatMainMoney(share) }} 占比{{
            ((share * 100) / totalShare).toFixed(2)
          }}%
        </div>
        <el-icon @click="handleOpen"><QuestionFilled /></el-icon>
      </div>
    </el-header>
    <el-main class="cl-main"><router-view /></el-main>
    <el-footer class="cl-footer">
      <div class="info">股市有风险，入市须谨慎</div>
      <div class="email">@吐槽:1367017150@qq.com</div>
    </el-footer>

    <div class="global-loading" v-if="isLoading">
      <div class="loading-content">
        <el-icon><Loading class="loading" /></el-icon>
        <p>数据正在获取...</p>
      </div>
    </div>

    <el-popover placement="top" :width="260" trigger="click">
      <template #reference>
        <div class="cl-reward">
          <i class="iconfont icon-dashang"></i>
          <div>打赏</div>
        </div>
      </template>
      <div class="cl-image">
        <img src="./assets/vx.png" />
        <hr width="240" />
        <img src="./assets/zfb.png" />
      </div>
    </el-popover>

    <el-drawer
      size="35%"
      title="评分策略"
      v-model="drawerOpen"
      :before-close="handleClose"
    >
      <v-md-preview :text="markdownText"></v-md-preview>
    </el-drawer>

    <el-drawer
      size="35%"
      title="板块策略"
      direction="ltr"
      v-model="sectorOpen"
      :before-close="handleSectorClose"
    >
      <v-md-preview :text="sectorText"></v-md-preview>
    </el-drawer>
  </el-container>
</template>

<script setup>
import { formatMainMoney } from '@/method';
import { stockStore } from '@/store/stock';
import mdText from '@/assets/doc.md?raw';
import stText from '@/assets/sector.md?raw';
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';

const store = stockStore();
const {
  totalShare,
  isLoading,
  isFilter,
  topGainers,
  topLosers,
  recommendations,
  historicalPredictions,
  conceptList,
  sectorList,
  newConceptList
} = storeToRefs(store);
const route = useRoute();
const activeIndex = ref('/topGainer');

const state = reactive({
  timer: null,
  drawerOpen: false,
  markdownText: '',
  sectorOpen: false,
  sectorText: ''
});

const share = computed(
  () =>
    store.topGainers.reduce((acc, item) => acc + item.marketValue, 0) +
    store.topLosers.reduce((acc, item) => acc + item.marketValue, 0)
);
const { drawerOpen, markdownText, sectorOpen, sectorText } = toRefs(state);

const handleOpen = () => {
  state.drawerOpen = true;
};
const handleClose = () => {
  state.drawerOpen = false;
};

const handleSectorOpen = () => {
  state.sectorOpen = true;
};
const handleSectorClose = () => {
  state.sectorOpen = false;
};

onMounted(() => {
  setTimeout(() => {
    activeIndex.value = route.path;
  }, 100);
  state.markdownText = mdText;
  state.sectorText = stText;

  store.getSectorList();
  store.getConceptList();
  store.getNewConceptList();
  store.fetchStockData();
  state.timer = setInterval(() => {
    store.fetchStockData();
    if (conceptList.value.length === 0) {
      store.getConceptList();
    }
    if (sectorList.value.length === 0) {
      store.getSectorList();
    }
  }, 5 * 60 * 1000);
});
onUnmounted(() => {
  if (state.timer) {
    clearInterval(state.timer);
  }
});
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100vh;
  .cl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    .left {
      display: flex;
    }
    .right {
      display: flex;
      .share {
        color: #e40;
        font-size: 24px;
        font-weight: 600;
      }
    }
    .name {
      color: #e40;
      font-size: 24px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-right: 40px;
      cursor: pointer;
      img {
        margin-right: 10px;
        width: 50px;
        height: 50px;
        border-radius: 6px;
      }
    }

    .el-icon {
      font-size: 32px;
      cursor: pointer;
    }
  }
  .cl-main {
    padding: 5px 20px;
  }
  .cl-footer {
    display: flex;
    justify-content: space-around;
    line-height: 60px;
    width: 100%;
    font-size: 32px;
    background: #e40;

    .info {
      color: #fff;
      font-weight: 600;
    }
    .email {
      color: #fff;
    }
  }

  .global-loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    .loading-content {
      background: linear-gradient(#409eff 0 0) 0 100%/0% 6px no-repeat;
      animation: l2 2s linear infinite;
      text-align: center;
      @keyframes l2 {
        to {
          background-size: 100% 6px;
        }
      }

      i {
        font-size: 40px;
        color: #409eff;
        margin-bottom: 10px;
      }
      .loading {
        animation: spin 2s linear infinite;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      p {
        color: #409eff;
        font-size: 16px;
        margin: 10px 0 0;
      }
    }
  }

  .cl-reward {
    position: fixed;
    z-index: 100;
    left: 20px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon-dashang {
      font-size: 32px;
      color: #46fc73;
    }
    div {
      font-size: 16px;
      color: #46fc73;
    }
  }
}

:deep(.el-drawer__header) {
  padding: 0;
  margin: 0;
}
:deep(.el-drawer__body) {
  padding: 0 5px;
}

:deep(.vuepress-markdown-body) {
  padding: 0 5px;
  padding-bottom: 10px;
}
</style>

<style lang="scss">
.cl-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  img {
    width: 240px;
  }
}
</style>
